import { Button, LinearProgress } from "@mui/material";
import React from "react";
import icon from "@/assets/images/home/subject.png";
import "./subjectlistitem.less";
import { useNavigate } from "react-router-dom";

// 当前用于 约束 props 的类型，只在当前这个组件里面使用，不用写到.d.ts里面
interface IProps {
  buttonText: string;
  data: IExamItem;
  isFast?: boolean;
}

// 首页和快速刷题 有 单独的列表，该组件就是列表里面的一项
export default function SubjectListItem({ data, buttonText, isFast }: IProps) {
  const navigate = useNavigate();
  const onButtonClick = () => {
    // 点击进行跳转到选择题目页面
    // 需要带过去一个actionCode参数，有三种方法，随便你
    // 这里我带大家使用 动态路由
    navigate(`/select/${data.actionCode}`);
  };

  return (
    <div className="sub-list-item flex">
      <div className="icon">
        <img src={icon} alt="" />
      </div>
      <div className="m">
        <h4>{data.title}</h4>
        <p style={{ display: isFast ? "none" : "block" }}>
          {/* 作业： 把 / 前面的数字做随机，把下面进度条，和上面的随机数的百度比一致 */}
          {data.itemCount}/{data.itemCount}题
        </p>
        <LinearProgress
          style={{ display: isFast ? "none" : "block" }}
          variant="determinate"
          value={100}
        />
      </div>
      <div className="but">
        <Button variant="contained" onClick={onButtonClick}>
          {buttonText}
        </Button>
      </div>
    </div>
  );
}
